<template>
	<view
		:class="{
			open: _show === true,
			close: _show === false
		}"
		class="container"
	>
		<view
			:class="{
				maskOpen: _show === true
			}"
			@touchmove.stop.prevent="() => {}"
			@click="close"
			class="mask"
		/>
		<view
			:animation="contentAnimationData"
			:style="{
				paddingBottom: safeBottom ? `${safeAreaInsetsBottom + 15}px` : '30rpx',
				backgroundColor
			}"
			class="content"
		>
			<slot />
		</view>
	</view>
</template>

<script setup>
import { ref, watch, getCurrentInstance } from 'vue';
const props = defineProps({
	show: Boolean,
	backgroundColor: {
		type: String,
		default: '#ffffff'
	},
	safeBottom: {
		type: Boolean,
		default: true
	}
});

const emit = defineEmits(['update:show']);
const safeAreaInsetsBottom = ref(0);
uni.getSystemInfo({
	success: function(res) {
		safeAreaInsetsBottom.value = res.safeAreaInsets.bottom;
	}
});

const _show = ref(null);

watch(
	() => props.show,
	v => {
		_show.value = v;
	}
);

const close = () => {
	emit('update:show', false);
};
</script>

<style lang="scss">
.container {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 100%;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	opacity: 1;
	&.open {
		top: 0;
		animation: openAnim 0.5s ease;
		@keyframes openAnim {
			from {
				top: 100%;
			}
			to {
				top: 0%;
			}
		}
	}
	&.close {
		top: 100%;
		animation: closeAnim 0.5s ease;
		@keyframes closeAnim {
			from {
				top: 0%;
			}
			to {
				top: 100%;
			}
		}
	}

	.mask {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1001;
		opacity: 1;
		&.maskOpen {
			background-color: rgba(#000000, 0.3);
			animation: maskOpenAnim 1s ease;
			@keyframes maskOpenAnim {
				0% {
					opacity: 0;
				}
				30% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
		}
	}
	.content {
		position: absolute;
		z-index: 1002;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		border-radius: 20rpx 20rpx 0 0;
	}
}
</style>
